<template>
<div>
  <div class="wrap">
    <div class="top">
      <el-carousel :interval="5000" :arrow="lunboList.length > 1 ? 'always' : 'never'" :height="`${bannerHeight}px`" :indicator-position="lunboList.length > 1 ? '' : 'none'">
        <el-carousel-item v-for="(item, index) in lunboList" :key="index">
          <router-link :to="item.route">
            <img class="banner" :src="item.url" alt="">
          </router-link>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="meal">
      <div v-if="couponlist.length > 0"  class="meal-title"><span></span><span class="pack">请选择套餐包</span><span></span></div>
      <swiper v-if="couponlist.length > 0" ref="mySwiper" style="display: flex !important; align-items: center !important;" class="meal-package swiper-no-swiping" :options="swiperOption">
        <swiper-slide class="slide" v-for="item in couponlist" :key="item.packageCode">
          <div class="slideCon">
            <div class="tip" v-if="item.label">{{item.label}}</div>
            <div class="meal-pic" :style="{ background: `url(${item.listImg || 'https://weber-imgs.oss-cn-beijing.aliyuncs.com/ty/hela/test/file/default.png'}) no-repeat 100%`, backgroundSize: 'cover' }">{{item.packageName}}</div>
            <div class="zero"><span style="font-size: 20px;">￥</span><span>{{item.salePrice}}</span></div>
            <div class="yuan">原价￥{{item.originalPrice}}</div>
            <div class="fang">
              <div class="hua">服务范围</div>
              <vuescroll :ops="ops">
                <div  class="list" v-for="(itemChild, index) in item.content" :key="index"><span class="dui"></span><span class="text">{{itemChild}}</span></div>
              </vuescroll>
            </div>
            <div class="btn" @click="open(item)">立即购买</div>
          </div>
        </swiper-slide>
        <div class="swiper-button-next" slot="button-next" v-if="couponlist.length > 4" @click="next"></div>
        <div class="swiper-button-prev" slot="button-prev" v-if="couponlist.length > 4" @click="prev"></div>
      </swiper>
    </div>
    <div class="market">
      <div class="market-title"><span></span><span>商户营销权益预览</span><span></span></div>
      <div class="market-list">
        <ul class="market-ul">
          <li v-for="(item, index) in marketList" :key="index">
            <div class="mask" v-show="item.remark && item.remark.split('').length > 32">
              <div class="title">{{item.name}}</div>
              <div class="content">{{item.remark}}</div>
            </div>
            <img :src="item.pic" alt="">
            <!-- <el-tooltip placement="top" :open-delay="time" :content="item.name"><span class="message">{{item.name}}</span></el-tooltip>
            <el-tooltip placement="top" :open-delay="time" :content="item.remark"><span class="desc">{{item.remark}}</span></el-tooltip> -->
            <span class="message">{{item.name}}</span>
            <span class="desc">{{item.remark}}</span>
          </li>
        </ul>
      </div>
    </div>
    <div class="bottom">
      <div>商家案例</div>
      <el-row :gutter="24" class="pic">
        <el-col :span="12">
          <div class="b-left">
            <img :src="params.image3Url" alt="">
          </div>
          <div class="word">{{params.image3Text}}</div>
        </el-col>
        <el-col :span="12">
          <div class="b-right">
            <img :src="params.image4Url" alt="">
          </div>
          <div class="word">{{params.image4Text}}</div>
        </el-col>
      </el-row>
    </div>
  </div>
</div>
</template>

<script>
import mixins from './components/onResize/mixin'
import { introduce, queryAvailablePackages, rightsPreview } from '@/api/market'
import { mapGetters } from 'vuex'
import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
import vuescroll from 'vuescroll';
import 'swiper/swiper-bundle.css'
export default {
  mixins: [mixins],
  data() {
    return {
      time: 500,
      swiperOption: {
        slidesPerView: 4, // 一页展示多少个
        spaceBetween: 10,
        slidesPerGroup: 4, // 鼠标滚动多少条
        loop: false, // 禁止循环
        loopFillGroupWithBlank: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '',
        }
      },
      // 配置滚动条
      ops: {
        bar: {
          background: '#ccc'
        }
      },
      couponlist: [],
      marketList:[], // 商户权益列表
      lunboList: [], // 轮播图
      params: {},
      bannerHeight: 400,
    }
  },
  directives: {
    swiper: directive
  },
  methods: {
    prev(){
      this.swiper.slidePrev();
    },
    next(){
      this.swiper.slideNext();
    },
    setSize () {
      // 通过浏览器宽度(图片宽度)计算高度
      this.bannerHeight = 400 / 1920 * this.screenWidth;
    },
    // 开通权益套餐 套餐的ID 套餐名称 应付金额和原价
    open (itemParams) {
      const { packageCode, packageName, salePrice, originalPrice } = itemParams
      this.$router.push({ 
        name: 'placeOrder',
        params: {
          packageCode, // code
          packageName, // 名称
          salePrice, // 实付金额
          originalPrice // 原价
        }
       })
      // 备份数据，存储在storage
      const params = { packageCode, packageName, salePrice, originalPrice }
      sessionStorage.setItem('params', JSON.stringify(params))
    },
    // 图片文案接口
    async introduceApi() {
      try {
        const res = await introduce()
        const { imageUrl, image3Text, image3Url, image4Text, image4Url }  = res.result
        this.params = { image3Text, image3Url, image4Text, image4Url }
        this.lunboList = imageUrl || []
      } catch(e) {
        console.log(e)
      }
    },
    // 套餐数据列表
    async queryAvailablePackagesApi() {
      try {
        const { code, result = [] } = await queryAvailablePackages()
        if(code !== 200) return
        this.couponlist = result
      } catch(err) {
        console.log(err)
      }
    },
    // 权益预览列表
    async rightsPreviewApi() {
      try {
        const { code, result = [] } = await rightsPreview()
        if (code !== 200) return
        this.marketList = result
      } catch(err) {
        console.log(err)
      }
    }
  },
  components: {
    Swiper,
    SwiperSlide,
    vuescroll
  },
  computed: {
    ...mapGetters([
      'routes'
    ]),
    swiper() {
      return this.$refs.mySwiper.$swiper
    }
  },
  mounted () {
    this.introduceApi()
    this.rightsPreviewApi()
    this.queryAvailablePackagesApi()
  }
}
</script>

<style lang="less" scoped>
.top {
  width: 100%;
  margin-top: 20px;
  .banner{
    display: block;
    width: 100%;
    height: 100%;
  }
}
.meal{
  margin-top: 30px;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .meal-title{
    width: 280px;
    padding: 30px 0;
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    display: flex;
    justify-content: space-between;
    align-items: center;
    >span:nth-child(1), span:nth-child(3){
      display: block;
      width: 48px;
      height: 12px;
      background: url(../../assets/image/icon/square.png) no-repeat;
      background-size: 100% 12px;
    }
    .pack{
      width: 154px;
    }
  }
  .meal-pic{
    width: 100%;
    height: 64px;
    font-size: 20px;
    color: #434343;
    font-weight: 800;
    text-align: center;
    line-height: 64px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  /deep/.swiper-wrapper{
    height: 600px;
    display: flex !important;
    align-items: center !important;
  }
  /deep/.swiper-button-prev:after, .swiper-button-next:after {
    font-family: swiper-icons;
    text-transform: none !important;
    letter-spacing: 0;
    // text-transform: none;
    font-variant: initial;
    line-height: 1;
  }
  /deep/.swiper-button-prev:after{
    content: '';
  }
  /deep/.swiper-button-next:after{
    content: '';
  }
  .meal-package{
    width:100%;
    height: 600px;
    display: flex;
    align-items: center !important;
    .slide {
      width: 100%;
      min-width: 250px;
      height:500px;
      display: flex;
      justify-content: center;
      align-items: center;
      .slideCon{
        position: relative;
        padding: 0 0 20px 0;
        width: 93%;
        height:500px;
        background: #fff;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        -webkit-transition: all .1s; 
        -moz-transition: all .1s; 
        -ms-transition: all .1s; 
        -o-transition: all .1s; 
        transition: all .1s;
      }
      .slideCon:hover {
        transform:scale(1.05, 1.05);
        background: #fff;
        box-shadow: 0px 4px 17px 0px rgba(0, 0, 0, 0.1);
      }
      .tip{
        // width: px;
        height: 24px;
        padding: 0 4px;
        font-size: 14px;
        text-align: center;
        line-height: 24px;
        position: absolute;
        right: -4px; 
        top: -12px;
        background: url('../../assets/image/icon/label.png') no-repeat;
        background-size: 100% 100%;
      }
      .pic{
        width: 100%;
        height: 64px;
        font-size: 20px;
        color: #434343;
        font-weight: 800;
        background-size: 100%;
        text-align: center;
        line-height: 64px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
      }
      .zero{
        padding: 20px 0 5px 0;
        font-size: 40px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 600;
        color: #E31837;
      }
      .yuan{
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        text-decoration: line-through;
        text-shadow: 0px 4px 17px rgba(0, 0, 0, 0.1);
        color: #999999;
      }
      .fang{
        width:90%;
        height: 230px;
        padding: 20px 0 10px 0;
        border:1px solid #e8e8e8;
        margin-top:30px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        .hua{
          width: 132px;
          height:32px;
          text-align: center;
          line-height: 32px;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #666666;
          position: absolute;
          z-index: 6;
          left: 50%; 
          top: 0%;
          transform: translate(-50%, -50%);
          background: url('../../assets/image/icon/hua.png') no-repeat;
          background-size: 100% 100%;
        }
        .list{
          width: 100%;
          display: flex;
          padding: 5px 10px;
          justify-content: center;
          align-items: center;
          .dui{
            display: inline-block;
            width: 24px;
            height: 24px;
            text-align: right;
            margin-right: 20px;
            background: url('../../assets/image/icon/dui.png') no-repeat;
            background-size: 100% 100%;
          }
          .text{
            font-size: 14px;
            display: block;
            flex:1;
            color: #333333;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space:nowrap;
          }
        }
      }
      .btn {
        width: 80%;
        height: 40px;
        margin-top:20px;
        border: 1px solid #4B7EFE;
        background: #4B7EFE;
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        text-align: center;
        line-height: 40px;
        border-radius: 30px;
        box-shadow: 0px 4px 17px 0px rgba(0, 0, 0, 0.1), 0px 2px 4px 0px rgba(75, 126, 254, 0.2);
        cursor: pointer;
      }
    }
  }
}
.market{
  width:100%;
  margin-top:30px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .market-title{
    width: 320px;
    padding: 30px 0;
    font-size: 24px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    display: flex;
    justify-content: space-between;
    align-items: center;
     >span:nth-child(1), span:nth-child(3){
      display: block;
      width: 48px;
      height: 12px;
      background: url(../../assets/image/icon/square.png) no-repeat;
      background-size: 100% 12px;
    }
    .pack{
      width: 192px;
    }
  }
  .market-list{
    width: 100%;
    .market-ul{
      width:100%;
      margin: 0;
      padding: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      align-items: flex-start;
      >li:hover .mask{
        transition-duration:0.5s;
        opacity:1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        .title {
          text-align: center;
          padding: 20px 0 10px 0;
          font-size: 20px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
        }
        .content {
          line-height: 24px;
          text-align: left;
          font-size: 14px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          margin: 0 20px 20px 20px;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:8;//行数
          overflow: hidden;
        }
      }
      >li {
        list-style: none;
        width:20%;
        min-width: 220px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        .mask{
          width:100%;
          background: #4B7EFE;
          position:absolute;
          top: 0;
          left:0;
          right:0;
          bottom: 0;
          transition-duration:.1s;
          opacity:0;
          .title {
            text-align: center;
            padding: 20px 0 10px 0;
            font-size: 20px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #FFFFFF;
          }
          .content {
            line-height: 24px;
            text-align: left;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #FFFFFF;
            margin: 0 20px 20px 20px;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:8;//行数
            overflow: hidden;
          }
        }
        img {
          display: block;
          width: 120px;
          height: 120px;
          padding: 20px;
        }
        .message{
          width: 165px;
          text-align: center;
          padding: 20px 0 10px 0;
          font-size: 20px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          overflow:hidden;
          text-overflow:ellipsis;
          white-space:nowrap;
        }
        .desc{
          max-width: 80%;
          height: 56px;
          text-align: left;
          margin-bottom: 48px;
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999999;
          display:-webkit-box;
          -webkit-box-orient:vertical;
          -webkit-line-clamp:3;//行数
          overflow: hidden;
        }
      }
    }
  }
}
.bottom {
  width: 100%;
  // height: 400px;
  padding: 10px;
  margin-top: 30px;
  background: #fff;

  .b-left {
    width: 100%;
    margin-top: 20px;
    height: 250px;
    >img {
      display: block;
      width: 100%;
      height: 250px;
    }
  }

  .b-right {
    width: 100%;
    margin-top: 20px;
    height: 250px;
    >img {
      display: block;
      width: 100%;
      height: 250px;
    }
  }

  .word {
    margin-top: 20px;
    color: #666666;
    font-size: 14px;
  }
}
.swiper-button-prev{
  border:1px solid #cccccc;
  width:38px;
  height:38px;
  opacity: 0.5;
  border-radius: 50%;
  background: url('../../assets/image/icon/left.png') no-repeat;
  background-size: 100% 100%;
}
.swiper-button-next{
  border:1px solid #cccccc;
  width:38px;
  height:38px;
  opacity: 0.5;
  border-radius: 50%;
  background: url('../../assets/image/icon/right.png') no-repeat;
  background-size: 100% 100%;
}
// /deep/.el-carousel__container{
//   min-width: 1200px;
// }
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
/deep/.el-carousel__arrow {
  z-index: 5;
}
</style>
